To make your blog look professional, you need a Layout. Think of a layout as a "wrapper" that adds your header, footer, and styling to every page automatically.

1. Create your Layout

By default, 11ty looks for layouts in a folder called _includes.

  1. Create the folder: mkdir _includes

  2. Create the layout file: Inside _includes, create a file named layout.njk (using Nunjucks, a popular templating engine for 11ty).

  3. Add this HTML:

   HTML  
   <!DOCTYPE html>  
   <html lang="en">  
   <head>  
     <meta charset="UTF-8">  
     <title>{{ title }}</title>  
     <style>  
       body { font-family: sans-serif; max-width: 800px; margin: 40px auto; padding: 0 20px; line-height: 1.6; }  
       nav { border-bottom: 1px solid #eee; padding-bottom: 20px; margin-bottom: 20px; }  
       nav a { margin-right: 15px; }  
     </style>  
   </head>  
   <body>  
     <nav>  
       <a href="/">Home</a>  
       <a href="/about/">About</a>  
     </nav>  
     <h1>{{ title }}</h1>  
     {{ content | safe }}  
   </body>  
   </html>  
   **Note:** {{ content | safe }} is the "placeholder" where your Markdown text will be injected.

---

2. Connect your Pages to the Layout

Update your index.md (and any future pages) to use this layout by adding it to the Front Matter:

Markdown

layout: layout.njk
title: My Home Page

Welcome to my blog! This content is now wrapped in a nice layout.

---

3. How to add another page (e.g., "About Me")

Adding a new page is as simple as creating a new file. You have two common ways to do this:

Option A: Simple File (URL: your-site.com/about/)

Create a file named about.md in your main folder:

Markdown

layout: layout.njk
title: About Me

I'm a developer learning Eleventy!

11ty will automatically turn about.md into about/index.html, making your URL clean.

Option B: Organized Folders

If you want to keep things tidy, you can create a folder named about and put an index.md inside it. 11ty treats this exactly the same way.

---

4. Deploy your changes

Since you've already connected Cloudflare to GitHub, you don't need to touch the Cloudflare dashboard again. Just push your changes:

Bash

git add .
git commit -m "Add layout and about page"
git push origin main

Would you like me to show you how to automatically generate a list of all your blog posts on the home page?